<template>
	<view class="wrap-item" v-if="item">
		<view class="title-bg">
			<view class="must" v-if="item.hasOwnProperty('require') && item.require">
				*
			</view>
		
			<view class="title">
				{{ item.title }}
			</view>
		</view>
		
		<view class="wrap-list m-t-30"
			@click="onChooseLocation"
		>
			<view class="wrap-left">
				<text class="place" v-if="value === ''">
					{{ item.place }}
				</text>
				
				<text class="input" v-else>
					{{ value }}
				</text>
			</view>
			
			<image
				class="location"
				mode="heightFix"
				:src="$staticImagePath('store/location.png')"
			/>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			/**
			 * 输入框的值
			 */
			value: {
				type: String,
				default: "",
			},
			/**
			 * 数据
			 */
			item: {
				type: Object,
				default: null,
			},
			/**
			 * 经纬度
			 */
			lat: {
				type: String,
				default: "",
			},
			lng: {
				type: String,
				default: "",
			},
		},
		methods: {
			/**
			 * 选择位置
			 */
			onChooseLocation() {
				uni.chooseLocation({
					success: (res) => {
						var address = this.$filters.onHandleAddress(res.address);
						this.$emit("input", address.slice(0, 3).join("/"));
						this.$emit("update:lat", res.latitude);
						this.$emit("update:lng", res.longitude);
					}
				});
			},
		},
	}
</script>

<style lang="scss" scoped>
	@import "../css/form.css";
	
	.wrap-list {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 30rpx;
		
		.wrap-left {
			flex: 1;
			overflow: hidden;
		}
		
		.location {
			width: auto;
			height: 32rpx;
		}
	}
</style>